<!-- 静态数据演示版本 适合任何后端 -->
<template>
  <view class="app">
    <button @click="openSkuPopup()">打开SKU组件</button>
<!-- aa -->
    <vk-data-goods-sku-popup
      ref="skuPopup"
      v-model="skuKey" 
      border-radius="20" 
      :localdata="goodsInfo"
      :mode="skuMode"
      @open="onOpenSkuPopup"
      @close="onCloseSkuPopup"
      @add-cart="addCart"
      @buy-now="buyNow"
    ></vk-data-goods-sku-popup>

  </view>
</template>

<script>
  var that;                                         // 当前页面对象
  export default {
    data() {
      return {
        // 是否打开SKU弹窗
        skuKey:false,
        // SKU弹窗模式
        skuMode:1,
        // 后端返回的商品信息
        goodsInfo:{}
      }
    },
    // 监听 - 页面每次【加载时】执行(如：前进)
    onLoad(options) {
      that = this;
      that.init(options);
    },
    methods: {
      // 初始化
      init(options = {}){

      },
      // 获取商品信息，并打开sku弹出
      openSkuPopup(){
        /**
         * 获取商品信息
         * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
         */
        // 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
        // goodsInfo是后端返回的数据
        that.goodsInfo = {
          "_id":"002",
          "name": "迪奥香水",
          "goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
          "sku_list": [
            {
              "_id": "004",
              "goods_id": "002",
              "goods_name": "迪奥香水",
              "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
              "price": 19800,
              "sku_name_arr": ["50ml/瓶"],
              "stock": 100
            },
            {
              "_id": "005",
              "goods_id": "002",
              "goods_name": "迪奥香水",
              "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
              "price": 9800,
              "sku_name_arr": ["70ml/瓶"],
              "stock": 100
            }
          ],
          "spec_list": [
            {
              "list": [
                {
                  "name": "20ml/瓶"
                },
                {
                  "name": "50ml/瓶"
                },
                {
                  "name": "70ml/瓶"
                }
              ],
              "name": "规格"
            }
          ]
        }
        that.skuKey = true;
      },
      // sku组件 开始-----------------------------------------------------------
      onOpenSkuPopup(){
        console.log("监听 - 打开sku组件");
      },
      onCloseSkuPopup(){
        console.log("监听 - 关闭sku组件");
      },
      // 加入购物车前的判断
      addCartFn(obj){
        let { selectShop } = obj;
        // 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
        let res = {};
        let name = selectShop.goods_name;
        if(selectShop.sku_name != "默认"){
          name += "-"+selectShop.sku_name_arr;
        }
        res.msg = `${name} 已添加到购物车`;
        if(typeof obj.success == "function") obj.success(res);
      },
      // 加入购物车按钮
      addCart(selectShop){
        console.log("监听 - 加入购物车");
        that.addCartFn({
          selectShop : selectShop,
          success : function(res){
            // 实际业务时,请替换自己的加入购物车逻辑
            that.toast(res.msg);
            setTimeout(function() {
              that.skuKey = false;
            }, 300);
          }
        });
      },
      // 立即购买
      buyNow(selectShop){
        console.log("监听 - 立即购买");
        that.addCartFn({
          selectShop : selectShop,
          success : function(res){
            // 实际业务时,请替换自己的立即购买逻辑
            that.toast("立即购买");
          }
        });
      },
      toast(msg){
        uni.showToast({
          title: msg,
          icon:"none"
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app {
    padding: 30rpx;
    font-size: 28rpx;
  }
</style>